<template>
  <div class="app-container">
    <el-form :inline="true" ref="refForm" :model="form" class="filter-container">
      <el-form-item label="结算日期：" prop="time">
        <el-date-picker
          v-model="form.time"
          class="filter-item"
          type="datetimerange"
          align="right"
          unlink-panels
          range-separator="至"
          :default-time="['00:00:00', '23:59:59']"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss">

        </el-date-picker>
      </el-form-item>
      <el-form-item label="返水额：" prop="minRebate">
        <el-input v-model="form.minRebate" style="width: 100px" @keyup.enter.native="submitFilterForm"></el-input>
      </el-form-item>
        
      <el-form-item prop="maxRebate">
        至&nbsp;&nbsp;

        <el-input v-model="form.maxRebate" style="width: 100px" @keyup.enter.native="submitFilterForm"></el-input>
      </el-form-item><br>
      <el-form-item label="总投注额：" prop="minBet">
        <el-input v-model="form.minBet" style="width: 100px" @keyup.enter.native="submitFilterForm"></el-input>
       </el-form-item>
      <el-form-item prop="maxBet">
        至&nbsp;&nbsp;
        <el-input v-model="form.maxBet" style="width: 100px" @keyup.enter.native="submitFilterForm"></el-input>
      </el-form-item>
      <el-form-item label="所属上级：" prop="parentName">
        <el-input v-model="form.parentName" @keyup.enter.native="submitFilterForm"></el-input>
      </el-form-item>
      <el-form-item label="账户名：" prop="username">
        <el-input v-model="form.username" style="width: 100px" @keyup.enter.native="submitFilterForm"></el-input>
      </el-form-item>
      <el-form-item label="平台：" prop="gameId">
        <el-select v-model="form.gamePlatformId">
          <el-option label="全部" :value="undefined"></el-option>
          <el-option v-for="item in consts.PLATFORM_TYPE"
                     :key="item.value"
                     :label="item.title"
                     :value="item.gamePlatformId">
          </el-option>
        </el-select>
      </el-form-item>
      <!--<el-form-item label="子游戏：">-->
      <!--<el-select v-model="form.gameId">-->
      <!--<el-option v-for="item in gameList"-->
      <!--:key="item.gameId"-->
      <!--:label="item.gameName"-->
      <!--:value="item.gameId">-->
      <!--</el-option>-->
      <!--</el-select>-->
      <!--</el-form-item>-->
      <!--<el-form-item label="状态：" prop="status">-->
      <!--<el-select v-model="form.status" filterable>-->
      <!--<el-option v-for="item in consts.REBATE_LOG_STATUS"-->
      <!--:key="item.value"-->
      <!--:label="item.title"-->
      <!--:value="item.value">-->
      <!--</el-option>-->
      <!--</el-select>-->
      <!--</el-form-item>-->
      <el-button type="primary" v-waves icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
      <el-button @click="selfResetForm('refForm')">重置</el-button>
    </el-form>

    <el-table :data="tableData.list" v-loading="loading" element-loading-text="给我一点时间" border fit
              highlight-current-row
              style="width: 100%">
      <el-table-column label="会员账号" align="center">
        <template slot-scope="{row}">
          {{row.username}}
        </template>
      </el-table-column>
      <el-table-column label="所属上级" align="center" prop="parentName">
      </el-table-column>
      <el-table-column label="平台" align="center" min-width="90" prop="gameName">
      </el-table-column>
      <!--<el-table-column label="子游戏" align="center" min-width="90">-->
      <!--<template slot-scope="{row}">-->
      <!--{{row.subGame}}-->
      <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column label="下注次数" align="center" width="120">
        <template slot-scope="{row}">
          {{row.betCount}}
        </template>
      </el-table-column>
      <el-table-column label="总投注额" align="center" min-width="120">
        <template slot-scope="{row}">
          {{row.betTotal | currency}}
        </template>
      </el-table-column>
      <el-table-column label="总有效投注额" align="center" min-width="120">
        <template slot-scope="{row}">
          {{row.betTotal | currency}}
        </template>
      </el-table-column>
      <el-table-column label="派彩金额" align="center" min-width="120">
        <template slot-scope="{row}">
          {{row.payoutTotal | currency}}
        </template>
      </el-table-column>
      <el-table-column label="返水比例" align="center" width="90px">
        <template slot-scope="{row}">
          {{row.rebateRate | formatMul(100)}}%
        </template>
      </el-table-column>
      <el-table-column label="返水金额" align="center" min-width="120">
        <template slot-scope="{row}">
          {{row.rebateTotal | currency}}
        </template>
      </el-table-column>
      <el-table-column label="发放时间" align="center" width="180">
        <template slot-scope="{row}">
          {{row.createTime | toTime}}
        </template>
      </el-table-column>
      <!--<el-table-column label="状态" align="center" width="90px">-->
      <!--<template slot-scope="{row}">-->
      <!--<el-tag :type="row.status === 4 ? 'danger' : ''">-->
      <!--{{row.status | toConverter('REBATE_LOG_STATUS')}}-->
      <!--</el-tag>-->
      <!--</template>-->
      <!--</el-table-column>-->
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import {form, grid, dialog, pickerOption} from '@/build';
  import {getSubGameListSelect} from '@/services/api/game'
  import {
    marketingRebateLogListApi as listApi,
  } from '@/services/api/marketing';

  export default {
    name: 'rebate-list',

    mixins: [form, grid, dialog, pickerOption],

    data() {
      const {username, time} = this.$route.query;
      const timeArray = Array.isArray(time) ? time : (time && time.split(',') || [])
      const startDate = timeArray[0] ? moment(timeArray[0]).format('YYYY-MM-DD 00:00:00') : moment().startOf('isoWeek').format('YYYY-MM-DD 00:00:00'),
        endDate = timeArray[1] ? moment(timeArray[1]).format('YYYY-MM-DD 00:00:00') : moment().format('YYYY-MM-DD 23:59:59');
      return {
        tableData: {
          list: [],
          total: 0
        },
        form: {
          time: [startDate, endDate],
          gamePlatformId: undefined,
          parentName: username,
          username: undefined,
          status: undefined,
        },
        filters: {
          startDate,
          endDate,
          page: 1,
          size: 20,
          parentName: username,
        },
        filterDateType: false,
        gameList: [],
      }
    },


    methods: {
      submitFilterForm() {
        const {time} = this.form;
        let startDate = undefined, endDate = undefined;
        if (!_.isUndefined(time) && _.isArray(time)) {
          startDate = time[0];
          endDate = time[1];
        }
        if(_.isUndefined(startDate) || _.isUndefined(endDate)){
          this.$notify({
            type:'error',
            message: '结算日期为必填参数'
          })
        }else{
          this.filters = {...this.filters, ...this.form, startDate, endDate}
          this.getAll()
        }
      },

      channelChangeHandler(val) {
        getSubGameListSelect({gameId: val}).then(([result, data]) => {
          if (result) {
            this.gameList = data
          }
        })
      },
      selfResetForm(formName) {
        this.resetForm(formName)
        this.getAll()
      }

    },

    mounted() {
      //tab页记录访问日志
      this.$store.dispatch(types.SAVE_OPERATION_LOG, {content: _.getContent(this.$route, '活动查询', true)});
      this.bindGet(listApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters'
      });

      this.getAll();
    }
  }
</script>
